<!DOCTYPE html>
<html ng-app="App">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>字典</title>

    <script src="__STATIC__/html/js/jquery-3.2.1.min.js" type="text/javascript"></script>
    <script src="__STATIC__/html/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="__STATIC__/html/js/angular.min.js" type="text/javascript"></script>
    <script src="__STATIC__/html/js/laydate/laydate.js" type="text/javascript"></script>
    <script src="__STATIC__/html/js/bootstrapValidator.min.js" type="text/javascript"></script>
    <script src="__STATIC__/html/js/treejs/dist/angular-ui-tree.js" type="text/javascript"></script>
    <script src="__STATIC__/html/js/catalog.js" type="text/javascript"></script>

    <link href="__STATIC__/html/css/bootstrap.min.css" rel="stylesheet">
    <link href="__STATIC__/html/css/treeui.css" rel="stylesheet">
    <link href="__STATIC__/html/css/style.css" rel="stylesheet">

    <style type="text/css">
        a,
        .pagination>li>a {
            color: #1abc9c;
        }
        
        .col-md-4 {
            padding-right: 0px;
        }
        
        .help-block {
            display: inline-block;
            margin: 0px;
        }
        li{
            list-style: none;
        }
        .reshow{
            display: none;
        }
    </style>
</head>

<body class="reshow" ng-controller="Aaa">
    <div class="container-fluid" style="padding:20px 30px;">
        <!--过度动画-->
        <div class="row" style="margin-top:20px;margin-bottom:20px;" ng-show='animateshow'>
            <div class="loader">
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="dot"></div>
            </div>
        </div>


        <script type="text/ng-template" id="nodes_renderer.html">
            <div ui-tree-handle class="tree-node tree-node-content">
                <a class="btn btn-success btn-xs" ng-if="node.nodes && node.nodes.length > 0" data-nodrag ng-click="toggle(this)"><span
                        class="glyphicon"
                        ng-class="{
          'glyphicon-chevron-right': collapsed,
          'glyphicon-chevron-down': !collapsed
        }"></span></a>
                {{node.Title}}




                <a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="delete(node)" data-toggle="modal" data-target="#myModal" ><span
                        class="glyphicon glyphicon-remove"></span></a>
                <a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="add(node)" style="margin-right: 8px;"><span
                        class="glyphicon glyphicon-plus"></span></a>
            <a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="update(node)" style="margin-right: 8px;"><span
                    class="glyphicon glyphicon-pencil"></span></a>
            </div>

            <ol ui-tree-nodes="" ng-model="node.nodes" ng-class="{hidden: collapsed}" data-nodrop-enabled="false">
                <li ng-repeat="node in node.nodes" ui-tree-node ng-include="'nodes_renderer.html'">
                </li>
            </ol>

        </script>

        <!-- 数据展示 -->
        <div class="row" ng-show='mainshow'>
            <div class="col-md-6">
                <div ui-tree>
                <ol ui-tree-nodes="" ng-model="nodes" data-nodrop-enabled="">
                    <li ng-repeat="node in nodes" ui-tree-node ng-include="'nodes_renderer.html'">{{node.Title}}</li>
                </ol>
                </div>
            </div>

            <!-- Modal -->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="myModalLabel">删除</h4>
                        </div>
                        <div class="modal-body">确认删除"{{deleterealname}}"？</div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">否</button>
                            <button type="button" class="btn btn-primary" ng-click="deletereal()" data-dismiss="modal">是</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 修改或添加 -->
        <div class="row" ng-show='updateshow' style="margin-top:20px;margin-bottom:20px;">
            <form name="myForm" id="defaultForm" novalidate>
                <div class="col-md-12">
                    <div class="row" style="margin-bottom: 15px;">
                        <div class="col-md-1">
                            <p style="font-weight: bold;width:100%;height:34px;text-align: right;line-height: 34px;margin:0px;">名称 :</p>
                        </div>
                        <div class="col-md-4 form-group">
                            <input type="text" name="Title" class="form-control" placeholder="请输入名称" ng-model="oneData.Title">
                        </div>
                    </div>
                    <div class="row" style="margin-bottom: 15px;" ng-show='parentshow'>
                        <div class="col-md-1">
                            <p style="font-weight: bold;width:100%;height:34px;text-align: right;line-height: 34px;margin:0px;">父级 :</p>
                        </div>
                        <div class="col-md-4 form-group">
                             <input type="hidden" name="ParentId;" class="form-control" placeholder="请输入父级ID" ng-model="oneData.ParentId" />
                             <input type="text" name="ParentTitle" readonly class="form-control" ng-model="oneData.ParentTitle">
                            <!--<select class="form-control" ng-model="oneData.ParentId">-->
                                <!--<option value="0" style="display: none;"></option>-->
                                <!--<option value="{{op.Id}}" ng-selected = "op.Id==oneData.ParentId?'selected':''" ng-repeat="op in Parents track by $index">{{op.Title}}</option>-->
                            <!--</select>-->
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-md-1">
                            <p style="font-weight: bold;width:100%;height:34px;text-align: right;line-height: 34px;margin:0px;"> </p>
                        </div>
                        <button class="btn btn-primary ajax-post " ng-click="save()">保存</button>
                        <button class="btn btn-default active" ng-click="backmain()">返回</button>
                    </div>
                </div>
            </form>
        </div>

        <div class="modal fade" id="ModalOK" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel1">提示</h4>
                    </div>
                    <div class="modal-body">
                        提交成功
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-primary" data-dismiss="modal">确定</button>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <script type="text/javascript">
        $(document).ready(function(){
            $(".reshow").each(function(){
                $(this).css({"display":"block"});
            })
        });

        var app = angular.module('App', ['ui.tree']);
        app.controller('Aaa', ['$scope', '$http', "$timeout", function($scope, $http, $timeout) {
            $scope.nodes=[];

            $scope.reset = function() {

                $scope.Subject = []; //所有科目
                $scope.oneData = {}; //一条数据
                $scope.mainshow = false; //默认显示主体

                $scope.Parents = [];
                $scope.ParentsArr = [];
                $scope.nodes=[];
                $scope.parentshow=false;
                $scope.animateshow=true;

                $http({
                    method: "get",
                    url: window.catalog.url + "catalog"
                }).then(function(data) {
                    $scope.teacherInfo = [];
                    var data=data.data.data;
                    $scope.nodes=getnode(data);
                })
                $timeout(function () {
                    $scope.animateshow=false;
                    $scope.mainshow = true;
                }, 1000);
//                $http({
//                    method: "get",
//                    url: $scope.url + "development/common/getCata"
//                }).then(function(data) {
//                    $scope.Parents = data.data.data;
//                    data.data.data.forEach(function(item) {
//                        $scope.ParentsArr[parseInt(item.Id)] = item.Title;
//                    });
//                })
            }




            $scope.reset();


            $scope.detailshow = false;
            $scope.updateshow = false;
            //添加
            $scope.add = function(item) {
                $scope.mainshow = false; //默认显示主体
                $scope.updateshow = true;
                $scope.parentshow=true;
                $scope.oneData = {ParentId:item.id,ParentTitle:item.Title};

            }

            //保存
            $scope.save = function() {

                var url = window.catalog.url + "catalog";
                var method = "post";
                if ($scope.oneData.Id) {
                    url = window.catalog.url + "catalog/" + $scope.oneData.Id;
                    method = "put";
                }

                $.ajax({
                    method: method,
                    url: url,
                    data: $scope.oneData,
                    dataType: "json",
                    success: function(data) {
                        $('#ModalOK').modal('show');
                        $timeout(function() {
                            $('#ModalOK').modal('hide');
                        }, 1500);
                        $scope.backmain();
                        $scope.reset();
                    }
                })
            }

            //修改
            $scope.update = function(item) {
                $scope.oneData.ParentId = item.ParentId;
                $scope.oneData.Title = item.Title;
                $scope.oneData.Id = item.id;
//               $scope.oneData.ParentTitle=item.Title;
                $scope.mainshow = false; //默认显示主体
                $scope.updateshow = true;
                $scope.parentshow=false;
            }

            $scope.delitem = {}; //删除的数据
            $scope.deleterealname = "";
            //点击删除按钮
            $scope.delete = function(item) {
                $scope.delitem = item;
                $scope.deleterealname = item.Title;
            }

            //点击“是”确认删除
            $scope.deletereal = function() {
                $http({
                    method: "delete",
                    url: window.catalog.url + "catalog/" + $scope.delitem.id,
                }).then(function(data) {

                    $('#ModalOK').modal('show');
                    $timeout(function() {
                        $('#ModalOK').modal('hide');
                    }, 1500);
                    $scope.reset();

                })

            }

            //所有的返回主界面
            $scope.backmain = function() {
                $scope.mainshow = true; //默认显示主体
                $scope.oneData = {}; //一条数据
                $scope.updateshow = false;
            }

        }]);
        $('#defaultForm').bootstrapValidator({
            excluded: [":disabled"],
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            live: 'enabled',
            fields: { /*验证：规则*/
                Title: { //验证input项：验证规则

                    validators: {
                        notEmpty: { //非空验证：提示消息
                            message: '用户名不能为空,'
                        },
                        stringLength: {
                            min: 1,
                            max: 100,
                            message: '用户名长度必须在1到100之间,'
                        }
                    }
                }
            }
        }).on('success.form.bv', function(e) {
        });


        function getnode(list){
            //获取所有根节点(pId=0)
            var result = [],temp = {};
            for(i = 0; i < list.length; i++){
                temp[list[i]['id']]=list[i];//将nodes数组转成对象类型
            }

            for(j=0; j<list.length; j++){
                tempVp = temp[list[j]['ParentId']]; //获取每一个子对象的父对象
                if(tempVp){//判断父对象是否存在，如果不存在直接将对象放到第一层
                    if(!tempVp["nodes"]) tempVp["nodes"] = [];//如果父元素的nodes对象不存在，则创建数组
                      tempVp["nodes"].push(list[j]);
                    //将本对象压入父对象的nodes数组
                }else{
                    result.push(list[j]);//将不存在父对象的对象直接放入一级目录
                }
            }
            return result;
        }
    </script>
</body>

</html>